<template>
    <div>
        <dv-border-box-10 style="width: 30vw; height: 30vh">
            <div class="content">
                <div class="title">
                    <dv-decoration-3 class="decoration1"/>
                    <h6 style="margin: 0;font-size: 18px;text-align: center;color: white">温度检测实时统计</h6>
                    <dv-decoration-3 class="decoration1"/>
                </div>
                <div class="temper-statistic" id="chart">
                
                </div>
            </div>
        </dv-border-box-10>
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import {onMounted, ref} from 'vue';
import axios from "@/Api/axiosInterceptor.ts";
import {headerConfig} from "@/Api/HeaderConfig.ts";
import {UPDATE_TIME} from "@/utils/UpdateTime.ts";
const option = ref({
  tooltip: {
    trigger: 'axis'
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['时段1', '时段2', '时段3', '时段4', '时段5', '时段6', '时段7'],
    axisLabel: {
      textStyle: {
        color: 'white'
      }
    }
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      textStyle: {
        color: 'white'
      }
    }
  },
  series: [
    {
      name: '空气温度',
      type: 'line',
      smooth: true, // 使曲线平滑
      data: [0, 0, 0, 0, 0, 0, 0]
    },
    {
      name: '土壤温度',
      type: 'line',
      smooth: true, // 使曲线平滑
      data: [0, 0, 0, 0, 0, 0, 0]
    }
  ]
});

let myChart;
onMounted(() => {
    const chartDom = document.getElementById('chart');
  if (chartDom) {
    myChart = echarts.init(chartDom);
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option.value);
    window.addEventListener('resize', () => {
      myChart.resize();
    });
  }
  axios.get(`http://localhost:8080/api/sensor-datas/device/lastnumbers?deviceId=8&numbers=7`, headerConfig).then((response) => {
        let arr = Array<number>();
        for (let index = 0; index < response.data.data.length; index++) {
            arr.push(response.data.data[index].value);
        }
        option.value.series[0].data = arr;
        myChart.setOption(option.value);
  }).catch((error) => {
      console.log(error);
  });
    axios.get(`http://localhost:8080/api/sensor-datas/device/lastnumbers?deviceId=2&numbers=7`, headerConfig).then((response) => {
        let arr = Array<number>();
        for (let index = 0; index < response.data.data.length; index++) {
            arr.push(response.data.data[index].value);
        }
        option.value.series[1].data = arr;
        myChart.setOption(option.value);
    });
    
    fetchData();

  // 设置定时器每3分钟获取新的数据
  setInterval(fetchData, UPDATE_TIME);
});

function fetchData() {
  axios.get(`http://localhost:8080/api/sensor-datas/device/lastnumbers?deviceId=8&numbers=7`, headerConfig)
    .then((response) => {
      let arr = Array<number>();
      for (let index = 0; index < response.data.data.length; index++) {
        arr.push(response.data.data[index].value);
      }
      option.value.series[0].data = arr;
      if (myChart) myChart.setOption(option.value);
    })
    .catch((error) => {
      console.log(error);
    });

  axios.get(`http://localhost:8080/api/sensor-datas/device/lastnumbers?deviceId=2&numbers=7`, headerConfig)
    .then((response) => {
      let arr = Array<number>();
      for (let index = 0; index < response.data.data.length; index++) {
        arr.push(response.data.data[index].value);
      }
      option.value.series[1].data = arr;
      if (myChart) myChart.setOption(option.value);
    })
    .catch((error) => {
      console.log(error);
    });
}


</script>

<style scoped>
.content{
    padding-top: 2vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.title {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.decoration1 {
    width: 12vw;
    height: 2vh;
}
.temper-statistic {
    width: 28vw;
    height: 28vh;
}
</style>